@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.cancel-purchase__wrapper-card {
	padding: 32px;
	margin-top: 12px;
}

.cancel-purchase__domain-options {
	.card {
		margin: 16px 0;
	}

	.cancel-purchase__refund-domain-info {
		color: var(--color-text-subtle);
		display: inline-block;
		font-size: $font-body-extra-small;
		line-height: 1.4;
		margin-top: 4px;
	}

	.cancel-purchase__domain-warning {
		display: inline-block;
		font-size: $font-body-small;
		line-height: 1.4;

		.form-label {
			margin: 1.5em 0;
		}
	}
}

.confirm-cancel-domain__formatted-header.formatted-header {
	margin: 16px 0 8px;
}

.cancel-purchase__features {
	line-height: 1.4;

	p {
		margin: 16px 0 8px 0;
		font-size: $font-body-small;
		line-height: 1.4;
	}

	ul.cancel-purchase__features-list {
		list-style: none;
		margin: 0 0 1.5em;
		padding: 0;

		li {
			list-style: none;
			display: flex;
			font-size: $font-body-small;

			span {
				margin: auto 0;
				flex: 1;
			}

			.gridicon {
				flex-shrink: 0;
				margin-inline-end: 8px;
				margin-top: 2px;
				color: var(--color-error-40);
			}
		}
	}
}

.cancel-purchase__refund-string {
	color: var(--color-success);
	font-weight: 600;
}

.cancel-purchase__warning-string {
	color: var(--color-error);
	font-weight: 600;
}

.cancel-purchase__confirm-buttons {
	display: flex;

	.form-button {
		margin-inline-start: 8px;
	}

	button.cancel-purchase__button {
		background-color: #F00;
	}
}

.cancel-purchase__refund-information {
	font-size: $font-body-small;
}

.cancel-purchase__button {
	@include breakpoint-deprecated( "<660px" ) {
		width: 100%;
	}
}

.cancel-purchase__changes {
	ul.cancel-purchase__changes-list {
		list-style: none;
		margin: 0 0 1.5em;
		padding: 0;

		li {
			list-style: none;
			display: flex;
			font-size: $font-body-small;

			span {
				margin: auto 0;
				flex: 1;
			}

			.gridicon {
				flex-shrink: 0;
				margin-inline-end: 8px;
				margin-top: 2px;
				color: var(--color-warning);
			}
		}
	}
}
